<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"/>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="index.css"/>
    <style>
        .el-form-item {
            margin-bottom: 7px;
        }
        .el-tabs__content{
            height: 400px;
        }
        .el-transfer-panel{
            width: 400px;
        }
    </style>
</head>
<body>
<div id="app">

    <el-row>
        <el-col :span="20">
            <el-menu theme="light" class="el-menu-demo" mode="horizontal">
                <el-menu-item index="1">
                    <el-button type="primary" size="large" icon="search" @click="query">检索</el-button>
                    <el-button type="primary" size="large" @click="saveMaterial">保存</el-button>
                    <el-button type="primary" size="large" @click="clearMaterial">清除</el-button>
                    <el-button type="primary" size="large" icon="delete" @click="deleteMaterial">删除</el-button>
                </el-menu-item>
            </el-menu>
        </el-col>
        <el-col :span="4">
            <el-menu theme="light" class="el-menu-demo" mode="horizontal">
                <el-menu-item index="2"><span style="font-size: 2em;">物料维护</span></el-menu-item>
            </el-menu>
        </el-col>
    </el-row>
    <el-form :inline="true" :model="materialForm" class="demo-form-inline">
    <div style="padding: 30px;">

            <el-row justify="center" type="flex" class="row-bg">
                <input type="hidden" id="materialHidden" value=""/>
                <el-col :span="10">
                    <el-form-item label="物料 :">
                        <el-input placeholder=""
                                  icon="search"
                                  v-model="materialForm.material"
                                  :on-icon-click="materialSearch"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="10">
                    <el-form-item label="版本 :">
                        <el-input placeholder=""
                                  v-model="materialForm.version"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>

        <!-- BOM检索弹出框 -->
        <el-dialog title="物料" :visible.sync="materialSearchDialog" top="5%">
            <el-table :data="materialDataDialog" @row-dblclick="selectedRowMaterial" border style="width: 100%" height="600">
                <el-table-column property="id" label="物料名称" width="230"></el-table-column>
                <el-table-column property="name" label="物料描述" width="300"></el-table-column>
                <el-table-column property="version" label="版本" width="200"></el-table-column>
            </el-table>
        </el-dialog>

    </div>

    <!--<p style="line-height:100%">-->
    <template>
        <el-tabs type="border-card" v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="主要信息" name="first">
                <el-row justify="center" type="flex" class="row-bg">
                    <el-col :span="20">
                        <el-form-item label="描述 :">
                            <el-input placeholder="" v-model="materialForm.description"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row justify="center" type="flex" class="row-bg">
                    <el-col :span="10">
                        <el-form-item label="状态 :">
                             <el-select v-model="materialForm.status" placeholder="请选择">
                                    <el-option
                                            v-for="item in statusList"
                                            :key="item.value"
                                            :label="item.label"
                                            :value="item.value">
                                    </el-option>
                                </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="10">
                        <el-form-item >
                            <el-checkbox v-model="materialForm.currentVersion">当前版本</el-checkbox>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row justify="center" type="flex" class="row-bg">
                    <el-col :span="10">
                        <el-form-item label="类型 :">
                            <el-select v-model="materialForm.type" placeholder="请选择">
                                <el-option
                                        v-for="item in typeList"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="10">
                        <el-form-item label="批次大小 :">
                            <el-input placeholder="" v-model="materialForm.lotSize"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row justify="center" type="flex" class="row-bg">
                    <el-col :span="10">
                        <el-form-item label="订单类型 :">
                            <el-select v-model="materialForm.orderType" placeholder="请选择">
                                <el-option
                                        v-for="item in orderTypeList"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="10">
                        <el-form-item label="计量单位 :">
                            <el-input placeholder="" v-model="materialForm.unitOfMeasure"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row justify="center" type="flex" class="row-bg">
                    <el-col :span="10">
                        <el-form-item label="工艺路线 :">
                            <el-input placeholder=""
                                      icon="search"
                                      v-model="materialForm.router"
                                      :on-icon-click="handleIconClick"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="10">
                        <el-form-item label="工艺路线版本 :">
                            <el-input placeholder="" v-model="materialForm.routerVersion"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row justify="center" type="flex" class="row-bg">
                    <el-col :span="10">
                        <input type="hidden" id="hiddenMaterialQuid" value=""/>
                        <el-form-item label="物料清单 :">
                            <el-input placeholder=""
                                      icon="search"
                                      v-model="materialForm.bom"
                                      :on-icon-click="itemBomSearch"></el-input>
                        </el-form-item>
                    </el-col>

                    <!-- BOM检索弹出框 -->
                    <el-dialog title="物料清单" :visible.sync="itemBomSearchDialog" top="5%">
                        <el-table :data="ItemBomData" @row-dblclick="selectedRowBom" border style="width: 100%" height="600">
                            <el-table-column property="id" label="物料清单" width="230"></el-table-column>
                            <el-table-column property="name" label="描述" width="300"></el-table-column>
                            <el-table-column property="version" label="版本" width="200"></el-table-column>
                        </el-table>
                    </el-dialog>

                    <el-col :span="10">
                        <el-form-item label="物料清单版本 :">
                            <el-input placeholder="" v-model="materialForm.bomVersion" :disabled="true"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row justify="center" type="flex" class="row-bg">
                    <el-col :span="10">
                        <el-form-item label="数量限制 :">
                            <el-select v-model="materialForm.quantityRestriction" placeholder="请选择">
                                <el-option
                                        v-for="item in qtyRestrictList"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="10">
                        <el-form-item label="数量乘数 :">
                            <el-input placeholder="" v-model="materialForm.qtyMultiplier"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>

            </el-tab-pane>
            <el-tab-pane label="构建" name="second">
                构建
            </el-tab-pane>
            <el-tab-pane label="时间敏感型物料" name="three">
                时间敏感型物料
            </el-tab-pane>
            <el-tab-pane label="自定义字段" name="four">
                自定义字段
            </el-tab-pane>
        </el-tabs>
    </template>
    </el-form>
</div>
</body>
<!-- 先引入 Vue -->
<script src="vue.js"></script>
<!-- 引入组件库 -->
<script src="index.js"></script>
<script type="text/javascript" src="mock.js"></script>
<script src="axios.js"></script>
<script type="text/javascript" src="material.js"></script>
</html>